<template lang="">
  <div class="home-comtainer">
    <van-nav-bar title="黑马头条" :fixed="true"/>
    <!-- 导入、注册、使用 ArticleInfo 组件 -->
    <!-- 在使用组建的时候，如果某个属性名是“小驼峰”形式，则绑定属性时候，建议改写成“连字符”格式，例如：cmtCount 建议写成 cmt-count -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleInfo v-for="item in artlist" :key="item.id" :title="item.title" :author="item.aut_name" :cmt-count="item.comm_count" :time="item.pubdate" :cover="item.cover"></ArticleInfo>
      </van-list>
  </van-pull-refresh>
  </div>
</template>
<script>
// 按需导入 API 接口  
import {getArticleListAPI} from '@/api/articleAPI.js'
// 导入需要的组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'
export default {
  name: 'Home',
  data(){
    return{
      page:1, // 页码
      limit:10,  // 每页显示多少条数据
      artlist:[],
      loading:true,  // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件，每当下一页数据请求回来之后，千万要记得把 loading 改为 false
      finished:false,  // 所有的数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      refreshing:true  // 是否正在下拉刷新
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList(isRefresh){
      const {data:res} = await getArticleListAPI(this.page,this.limit)
      if (isRefresh) {  // 下拉刷新，新数据在前，旧数据在后
        this.artlist = [...res,...this.artlist] // 如果是...res，那么应该是 this.artlist = [...新数据,...旧数据]
        this.refreshing = false
      } else {  // 上拉加载更多，旧数据在前，新数据在后
        this.artlist = [...this.artlist,...res] // 如果是上拉加载更多，那么应该是 this.artlist = [...旧数据,...新数据]
        this.loading = false
      }
      if (res.length === 0) { // 证明没有下一页数据了，直接把 finished 改成 true，表示数据加载完了！
        this.finished = true
      }
    },
    onLoad(){ //只要 onLoad 被调用就应该请求下一页数据
      console.log('触发了onLoad事件！');
      // 1.页码+1
      this.page++
      // 2.重新请求接口获取数据
      this.initArticleList()
    },
    onRefresh(){  // 下拉刷新的处理函数
      console.log('触发了onRefresh事件！');
      // 1.页码+1
      this.page++
      // 2.重新请求接口获取数据
      this.initArticleList(true)
    }
  },
  components:{  // 注册组件
    ArticleInfo
  }
}
</script>
<style lang="less" scoped>
  .home-comtainer{
    padding: 46px 0 50px 0;
  }
</style>
